<!--
 * @Description: 系统字段
 * @Author: qingyang
 * @Date: 2024-02-02 16:04:17
 * @LastEditors: qingyang
 * @LastEditTime: 2024-02-02 16:04:17
-->
<template>
  <CPageLayout
    class="data-dict-container"
    :headerConfig="headerConfig"
    isShowSidebar
    bodyStyle="background:#F3F7FB"
  >
    <template #headerRightBtn>
      <el-button @click="handleEdit()" type="primary" v-btnPermission="'DICT_ADD'">
        <CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>新增
      </el-button>
    </template>
    <template #sidebar="{ collapseState }">
      <SideField :collapse="collapseState" :list="filedList" @select="handleSelect"></SideField>
    </template>
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #statusSlot="{ scope }">
        <el-tag v-if="!scope.row.enableFlag" type="info">停用</el-tag>
        <el-tag v-else type="success">启用</el-tag>
      </template>
      <template #createBySlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.createBy"
          :sub-text="scope.row.createTime"
        ></CTableColumn>
      </template>
      <template #updateBySlot="{ scope }">
        <CTableColumn
          :main-text="scope.row.updateBy"
          :sub-text="scope.row.updateTime"
        ></CTableColumn>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" :show-more-num="1" />
      </template>
    </CPageTable>
    <SystemFieldDialog
      v-model:visible="editDialogVisible"
      :nodeItem="selectItem"
      :dataType="`${searchForm.dataGroup ? searchForm.dataGroup : ''}-${searchForm.dataType}`"
      @refresh="handleRefresh"
    ></SystemFieldDialog>
  </CPageLayout>
</template>
<script lang="ts">
export default {
  name: 'SystemField'
};
</script>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import { CPageLayout, PageHeaderComplexSize } from '@/components/CPageLayout';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableColumn, CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { useMessage } from '@/hooks/useMessage';
import { useKeepAliveRefresh } from '@/hooks/useKeepAliveRefresh';
import { IDictItemResult, IDictTypeItem } from '@/apis/system/dataDict/model/dataDictModel';
import { getDictTypeList, updateStatusDict, removeDict } from '@/apis/system/dataDict';
import { useModelList } from './useModelList';
import SideField from './components/SideField/index.vue';
import { SystemFieldDialog } from './components/SystemFieldDialog/index';

const { createConfirm, createMessage } = useMessage();
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useModelList();
const options = reactive<CPageTableProps>({
  title: '系统字段',
  showPageHeader: false,
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});

const headerConfig = computed(() => {
  return {
    title: '数据字典',
    size: 'small' as PageHeaderComplexSize
  };
});

function getTableButtonsConfig(row: IDictItemResult): TableButtonItem[] {
  return [
    {
      text: '编辑',
      btnPermission: 'DICT_EDIT',
      onClick: () => handleEdit(row)
    },
    {
      text: row.enableFlag == false ? '启用' : '停用',
      btnPermission: 'DICT_EDIT_STATUS',
      onClick: () => handelUpdate(row)
    },
    {
      text: '删除',
      btnPermission: 'DICT_DELETE',
      onClick: () => deleteClick(row)
    }
  ];
}

const [registerPage, { refresh }] = useCPageTable(options);
const selectItem = ref();
const editDialogVisible = ref(false);
const filedList = ref<any[]>([]);
const loadFiledList = async () => {
  const data = await getDictTypeList();
  filedList.value = data ?? [];
  searchForm.dataType = filedList.value[0].dataType;
  searchForm.dataGroup = filedList.value[0].dataGroup ?? undefined;

  refresh(true);
};
const handleSelect = (item: IDictTypeItem) => {
  searchForm.dataType = item.dataType;
  searchForm.dataGroup = item.dataGroup ?? undefined;
  refresh(true);
};
loadFiledList();
function handleEdit(row?: IDictTypeItem) {
  if (row) {
    selectItem.value = row;
  } else {
    selectItem.value = undefined;
  }
  editDialogVisible.value = true;
}
// 更新状态 - click
const handelUpdate = async (row: IDictItemResult) => {
  createConfirm(
    row.enableFlag ? '确认停用？' : '确认启用？',
    row.enableFlag ? '当前字典停用后，将无法在系统中使用。' : '确认启用该字典。',
    {
      iconType: row.enableFlag ? 'warning' : '',
      confirmButtonText: row.enableFlag ? '停用' : '启用'
    }
  ).then(async () => {
    await updateStatusDict(row.id, !row.enableFlag);
    createMessage.success(`${row.enableFlag ? '停用' : '启用'}成功！`);
    refresh();
  });
};
const deleteClick = (row: IDictItemResult) => {
  createConfirm('确定删除该系统字段吗？', '删除后需要重新添加！', {
    iconType: 'warning',
    confirmButtonText: '删除'
  }).then(async () => {
    await removeDict(row.id);
    createMessage.success(`${row.dataValue}删除成功！`);
    handleRefresh();
  });
};
const handleRefresh = () => {
  refresh(true);
};
useKeepAliveRefresh(refresh);
</script>

<style lang="scss" scoped>
.data-dict-container {
  :deep(.header-left__title--text) {
    font-size: 14px;
  }
}
</style>
